<template>
  <div >
       <Node :item="json" :index="0"></Node>
  </div>
</template>
<script>
import ChildNode from './components/ChildNode.vue'
export default {
  components:{ChildNode},
 created(){
      fetch("../src/assets/data.json")
      .then(res=>res.json())
      .then(res=>{
        
        // this.json = res.slice(0,10);
        var list= res;
       
        var data =list.shift();
        data.level = 0;
        data.count=1;
        // console.log(list,"list",data);
       localStorage.clear();
        function formatData(list,parent,index){
          
          for(let i=0;i<list.length;i++){
            
            if(list[i].PID ==parent.ID){
              var elem = list.splice(i,1)[0];         
              elem.level=parent.level+1;
              if( localStorage.getItem(elem.level)){
                elem.count = localStorage.getItem(elem.level)*1+1;
                localStorage.setItem(elem.level,elem.count)
              }else{
                elem.count=1;
                localStorage.setItem(elem.level,elem.count)
              }
              if(parent.children){
                parent.children.push(elem)
              }else{
                parent.children=[elem]
                
                
              }
               
              formatData(list,elem);
              
            }
          }
         
        }
        formatData(list,data);
        console.log(data)
       this.json = data;
      })
 },
 data(){
  return {json:[]}
 }
}
</script>
<style>
  #app{
    width: 500000px;
    height: 500000px;
  }
</style>